<template>
  <div style="padding-bottom:50px;">
      <div class="image-panel">
          <div class="item" :style="{background:'url('+img+') no-repeat center / contain'}"></div>
      </div>
      <div class="price-panel">
          <div class="pull-left">
              <div class="price-now">￥1000 <del class="price-old">￥1500</del></div>
          </div>
          <div class="pull-right">
              SUPER MASKY
          </div>
      </div>
      <div class="box box_1">
          <div class="pull-left">运费 20</div>
          <div class="pull-left">月销 204</div>
          <div class="pull-left">中国</div>
      </div>
      <div class="box box_2">
          hinkPad New S2 2017（02CD）13.3英寸轻薄笔记本电脑
          <p><small>限时限量！轻至1.47KG，金属A面，SSD固态硬盘！【ThinkPad】引领高品质生活~白条6期免息~价保详情》</small></p>
      </div>
      <div class="box box_3">
          <p class="title">满200减30</p>
          <p><small>本商品可以参加满减活动</small></p>
          <a class="detail"><img src="../assets/more.png"></a>
      </div>
      <div class="box box_4">
          <i class="box_hd_arrow"></i>
          <i class="box_hd_dec" :style="{backgroundImage:'url('+corner_img+')'}"></i>
          <div class="pull-left">发现好东西</div>
          <div class="pull-right">掌柜亲选好物，限时抢购~</div>
      </div>
      <div class="box box_3">
          选购参数：
          <a class="detail"><img src="../assets/more.png"></a>
      </div>
      <div class="box box_3">
          尺寸重量：<small>12cm x 20cm x 10cm (长*宽*高)，2.0kg</small>
      </div>
      <div class="box box_3 box_detail">
          <table id="__01" width="100%" align="center" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td><img src="https://img11.360buyimg.com/cms/jfs/t3262/116/8780455946/147239/a4ac6cc4/58ca2728N5ca87e25.jpg" width="640" height="942" alt=""></td></tr><tr><td><img src="https://img13.360buyimg.com/cms/jfs/t4318/21/2000258935/112021/1fd5938d/58ca272aNac2094b2.jpg" width="640" height="943" alt=""></td></tr><tr><td><img src="https://img12.360buyimg.com/cms/jfs/t4441/213/128318524/127282/80095ea0/58ca272dN00811372.jpg" width="640" height="942" alt=""></td></tr><tr><td><img src="https://img13.360buyimg.com/cms/jfs/t4507/229/115440102/75549/a2283002/58ca272cNeb7107ff.jpg" width="640" height="943" alt=""></td></tr><tr><td><img src="https://img14.360buyimg.com/cms/jfs/t3226/74/8783159592/87623/be604f4d/58ca2733Nc084169d.jpg" width="640" height="942" alt=""></td></tr><tr><td><img src="https://img11.360buyimg.com/cms/jfs/t4252/29/1971898303/81373/1e9f77c9/58ca2734N3a49f6cb.jpg" width="640" height="943" alt=""></td></tr><tr><td><img src="https://img12.360buyimg.com/cms/jfs/t4357/295/2004061870/73571/e113f63f/58ca2734Ncf375f9b.jpg" width="640" height="942" alt=""></td></tr><tr><td><img src="https://img14.360buyimg.com/cms/jfs/t4447/247/118628339/101243/276847f2/58ca273cNacd4f5c4.jpg" width="640" height="943" alt=""></td></tr><tr><td><img src="https://img10.360buyimg.com/cms/jfs/t4540/263/114843390/69111/fa1a898c/58ca2741N41ab8dc8.jpg" width="640" height="942" alt=""></td></tr><tr><td><img src="https://img14.360buyimg.com/cms/jfs/t4672/236/115358692/94721/40625bad/58ca2743N5419b544.jpg" width="640" height="943" alt=""></td></tr><tr><td><img src="https://img14.360buyimg.com/cms/jfs/t4633/244/121346718/126809/7d7f73e7/58ca2747N7d1674d9.jpg" width="640" height="942" alt=""></td></tr></tbody></table>
      </div>
      <div class="box box_3">
          <div class="text-center">包装清单</div>
          <table class="list-content" cellspacing="1" cellpadding="0">
              <thead>
              <tr>
                  <td>名称</td>
                  <td>数量</td>
              </tr>
              </thead>
              <tbody>
              <tr>
                  <td>笔记本</td>
                  <td>x1</td>
              </tr>
              <tr>
                  <td>充电线</td>
                  <td>x1</td>
              </tr>
              <tr>
                  <td>充电头</td>
                  <td>x1</td>
              </tr>
              <tr>
                  <td>赠送电脑包</td>
                  <td>x1</td>
              </tr>
              <tr>
                  <td>包装盒</td>
                  <td>x1</td>
              </tr>
              </tbody>
          </table>
      </div>
      <div class="box box_3">
          温馨提示：<small>凡购买本店产品均享受三包服务，1.....;2.....;3.....;</small>
      </div>
      <div class="bottom-panel">
          <a class="pack-btn" v-on:click="go-pack">加入购物车</a>
          <a class="buy-btn" v-on:click="go_buy" >立即购买</a>
      </div>
  </div>
</template>

<script>
export default {
    name: 'shopping_pack',
    data () {
        return {
            edit_text:'编辑',
            img:require('../assets/goods/1.jpg'),
			corner_img:require('../assets/sprite_index.png'),
        }
    },
    methods:{
		go_buy:function ()
		{
            this.$router.push('/order-confirm')
		}
    }

}
</script>

<style scoped>
    .box{
        overflow: hidden;
        position: relative;
        padding: 10px;
        border-bottom: 4px solid #f4f4f4;
        width: 100%;
    }
    small{
        color: #777;
    }
    .box_1{
        border-bottom: 1px solid #eee;
    }
    .box_1 div{
        width: 33.33%;
        text-align: center;
        font-size: 0.8rem;
        color: #777;
    }
    .box_2{
        font-weight: bold;
        font-size: 1.2rem;

    }
    .box_3 .title{
        color: #E30000;
        font-size: 1.2rem;
        font-weight: bold;
    }
    .box_3 .detail{
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        padding: 10px;
    }
    .box_3 .detail img{
        width: 24px;
    }
    .box_detail img{
        width: 100%;
        height: auto;
    }
    .box_4{
        background: #4998a1;
        min-height: 50px;
        color: #fff;
    }
    .box_4 .box_hd_dec{
        display: block;
        position: absolute;
        top: -4px;
        left: -4px;
        background-position: -190px -96px;
        -moz-background-size: 218px 188px;
        background-size: 218px 188px;
        background-repeat: no-repeat;
        width: 28px;
        height: 28px;
    }
    .box_4 .box_hd_arrow {
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 0;
        border-top: 19px solid #f6f6f6;
        border-right: 19px solid transparent;
    }
    .box_4 .pull-left{
        font-size: 1.2rem;
        padding-left: 20px;
    }
    .box_4 .pull-right{
        font-size: 0.8rem;
        padding-top: 10px;
        display: block;
    }
    .list-content{
        margin: 10px 0;
        width: 100%;
        color: #777;
        background: #f4f4f4;
    }
    .list-content tr td{
        padding: 5px;
    }
    .list-content tr{
        background: #fff;
    }
    .list-content thead tr{
        color: #333;

    }
    .list-content tbody tr td{
        font-size: 0.8rem;
    }
    .price-panel{
        background: linear-gradient(to right bottom,#2c3e50, #2c4f60);
        color: #fff;
        height: 55px;
        padding: 10px;
    }
    .price-panel .price-now{
        line-height: 40px;
        font-weight: bold;
        font-size: 1.2rem;
    }
    .price-panel .price-old{
        font-size: 0.8rem;
        color: #eee;
    }
    .price-panel .pull-right{
        border-left: 1px solid #fff;
        padding: 10px 10px;
    }
    .image-panel{
        width: 100%;
        height: 270px;
        overflow: hidden;
        position: relative;
    }
    .image-panel .item{
        float: left;
        height: 100%;
        width: 100%;
        display: block;

    }
    .bottom-panel{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50px;
        border-top: 1px solid rgba(0,0,0,0.1);
        overflow: hidden;
    }
    .bottom-panel .buy-btn{
        display: block;
        float: right;
        width: 50%;
        background: #E30000;
        color: #fff;
        text-align: center;
        line-height: 50px;
    }
    .bottom-panel .pack-btn{
        display: block;
        float: left;
        width: 50%;
        background: #2c3e50;
        color: #fff;
        text-align: center;
        line-height: 50px;
    }
</style>
